/**
 * Created by 1 on 2016/11/23.
 */
//==========================================封装TreeNode=================================//
function TreeNode(obj) {
    this.parent = obj.parent;
    this.childs = obj.childs || [];
    this.data = obj.data || "";
    this.selfElement = obj.selfElement;
    this.selfElement.TreeNode = this;
}
//原型模式封装公共函数
TreeNode.prototype = {
    constructor:TreeNode,//构造器指向包含的函数
    //页面渲染方法
    render:function (arrow,visibility,toHighlight,deHighLight) {
        if (arguments.length < 3){//判断传入函数的参数个数
            toHighlight = false;
            deHighLight = false;
        }
        if (arrow){
            if(this.isLeaf()){
                this.selfElement.getElementsByClassName("arrow")[0].className = "arrow empty-arrow";
            }else if (this.isFolded()){
                this.selfElement.getElementsByClassName("arrow")[0].className = "arrow right-arrow";
            }else {
                this.selfElement.getElementsByClassName("arrow")[0].className = "arrow down-arrow";
            }
        }
        if (visibility){
            if (this.selfElement.className.indexOf("nodebody-visible") == -1){//原本不可见，设置为可见
                this.selfElement.className = this.selfElement.className.replace("hidden","visible");
            }else {//否则可见变为不可见
                this.selfElement.className = this.selfElement.className.replace("visible","hidden");
            }
        }
        if(toHighlight){
            this.selfElement.getElementsByClassName("node-title")[0].className = "node-title node-title-highlight";
        }
        if (deHighLight){
            this.selfElement.getElementsByClassName("node-title")[0].className = "node-title";
        }
    },
    //删除节点
    deleteNode:function () {
        var i;
        if (!this.isLeaf()){
            for (i = 0; i < this.childs.length;i++){
                this.childs[i].deleteNode();//递归删除子节点
            }
        }
        this.parent.selfElement.removeChild(this.selfElement);
        this.parent.render(true,false);
    },
    addNode:function (text) {
        if (text == null){return this};
        if (text.trim() == ""){
            alert("节点内容不能为空");
            return this;
        }
        //判断是否为叶子节点，并且判断打开状态
        if (!this.isLeaf() && this.isFolded()){
            this.toggleFold();
        }
        var newNode = document.createElement("div");
        newNode.className = "nodebody-visible";
        var newHeader = document.createElement("label");
        newHeader.className = "node-header";
        var newSymbol = document.createElement("div");
        newSymbol.className = "arrow empty-arrow";
        var newTitle = document.createElement("span");
        newTitle.className = "node-title";
        newTitle.innerHTML = text;
        var space = document.createElement("span");
        space.innerHTML = "&nbsp;&nbsp;";
        var newDelete = document.createElement("img");
        newDelete.className = "deleteIcon";
        newDelete.src = "images/delete.png";
        var newAdd = document.createElement("img");
        newAdd.className = "addIcon";
        newAdd.src = "images/add.png";
        newHeader.appendChild(newSymbol);
        newHeader.appendChild(newTitle);
        newHeader.appendChild(space);
        newHeader.appendChild(newDelete);
        newHeader.appendChild(newAdd);
        newNode.appendChild(newHeader);
        this.selfElement.appendChild(newNode);
        //创建对应的TreeNode对象并添加到子节点队列
        this.childs.push(new TreeNode({parent:this,childs:[],data:text,selfElement:newNode}));
        //渲染样式
        this.render(true,false);
        return this;//返回自身以便链式操作
    },
    //折叠方法
    toggleFold:function () {
        if(this.isLeaf()){return this};
        for (var i = 0;i < this.childs.length;i++){
            this.childs[i].render(false,true);//循环改变所有元素的状态
        }
        this.render(true,false);//改变本节点的箭头
        return this;
    }
    ,
    //判断是否为叶子节点
    isLeaf:function () {
        return this.childs.length = 0;
    },
    //判断是否为折叠状态
    isFolded:function () {
        if (this.isLeaf()) return false;//是叶子节点，则什么也不需要返回
        if (this.childs[0].selfElement.className == "nodebody-visible") return false;
        return true;
    }


};
//==========================================以上封装TreeNode=================================//
//==========================================事件绑定区=================================//




//==========================================以上事件绑定区=================================//
/**
 * CSS的DOM元素选择器
 * @param ele
 * @returns {Element}
 */
function $(ele) {
    return document.querySelector(ele);
}
/**
 * 监听事件兼容函数
 * @param element
 * @param type
 * @param handler
 */
function eventHandler(element, type, handler) {
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if (element.attachEvent){
        element.attachEvent('on' + type,handler);
    }else {
        element['on' + type] = handler;
    }
}
/**
 * 节点处理函数
 */
function nodeHandler() {
    var firstMenu = document.getElementsByClassName("first-menu");
    for (var i = 0;i < firstMenu.length;i++){
        eventHandler(firstMenu[i],'click',function () {
           var ulList = this.getElementsByTagName("ul");
            for(var i = 0;i < ulList.length;i++){
                ulList[i].style.display = 'block';
            }
        });
    }
}
function init() {
    nodeHandler();
}
//============================//
init();